<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.demo,
		.img,
		.mask,
		.border {
			width: 300px;
			height: 300px;
			border-radius: 50%
		}
		
		.demo {
			position: relative;
			display: block;
		}
		
		.img {
			background-image: url("http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1609/25/c10/27492004_1474796690667_mthumb.jpg");
			background-size: cover;
			background-position: 50% 50%;
		}
		
		.mask,
		.border {
			position: absolute;
			top: 0;
			left: 0
		}
		
		.mask {
			text-align: center;
			color: rgba(255, 255, 255, 0);
			transition: all 0.6s ease-in;
		}
		
		.info {
			margin-top: 50%;
			transform: translateY(-50%);
		}
		
		.border {
			border: 10px solid #10aeff;
			box-sizing: border-box;
			border-top-color: yellow;
			border-left-color: yellow;
			transition: all 0.6s ease-in;
		}
		
		.demo:hover .mask {
			background-color: rgba(0, 0, 0, 0.3);
			color: rgba(255, 255, 255, 1);
		}
		
		.demo:hover .border {
			transform: rotate(180deg);
		}
	</style>
</head>
<a href="#" class="demo">
	<div class="img"></div>
	<div class="mask">
		<div class="info">
			<h2>漂亮的妹纸</h2>
			<p>这是一只漂亮的妹纸</p>
		</div>
	</div>
	<div class="border"></div>
</a>

<body>
</body>

</html>